<template>
	<view class="container">
		<loading :show="loading_show"></loading>
		<customHead
			@scrollChange="scrollChange" 
			title="搜索"
			titlePaddingLeft="30"
			:isShowBackArrow="true"
			:navi_background="`linear-gradient(to right, ${lightColor}, ${lightColor1} 700rpx)`"
			:placeholder="true"
		>
			<template>
				<view class="slide_box">
					<view class="input_box">
						<input type="text" class="input" v-model="keyword" @blur="searchSubmit(keyword)"/>
						<view class="icon">
							<u-icon name="search" size="20" :color="_temp_themeColor"></u-icon>
							<text class="text">搜索</text>
						</view>
					</view>
				</view>
			</template>
		</customHead>
		<view class="history">
			<view class="title">
				<text :style="{color: _titleColor}">搜索历史</text>
				<u-icon type="" @click="clearHistory" name="trash-fill" :color="_themeColor"></u-icon>
			</view>
			<view class="history_item_box">
				<view class="history_item" @click="clickHis(item)" v-for="(item, index) in historySearchList" :key="index">
					<text :style="{color: _temp_textColor}">{{item}}</text>
				</view>
			</view>
		</view>
		<view class="main_content">
			<view class="goods_item" @click="gotoDetail(item.id)" v-for="(item, index) in goodsList" :key="item.id">
				<image :src="item.previewUrl" mode="aspectFill"></image>
				<view class="goods_title">
					<text :style="{color: _temp_titleColor}">{{item.goodsName}}</text>
				</view>
				<view class="desc">
					<text :style="{color: _temp_titleColor}">{{item.goodsRemarks}}</text>
				</view>
				<view class="price">
					<view class="" v-if="currentFirm.id">
						<span>￥</span>
						<text>
							{{item.goodsPrice}}
						</text>
					</view>
					<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
					<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { searchPlugsGoodsByCategoryId } from "@/tools/request/api.js"
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	export default {
		data() {
			return {
				goodsPage: {
					page: 1,
					size: 10,
					totalPage: 0,
					hasNextPage: false
				},
				loading_show: false,
				goodsList: [],
				keyword: '',
				historySearchList: []
			};
		},
		onLoad () {
			this.getHistory();
		},
		computed: {
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.7);
				console.log(light_color, 'light_color')
				return light_color;
			},
			lightColor1 () {
				let light_color = makeLightColor(this._temp_themeColor, 0.9);
				console.log(light_color, 'light_color')
				return light_color;
			}
		},
		methods: {
			gotoAddStore () {
				uni.navigateTo({
					url: '/subpack_my/myStore/myStore'
				})
			},
			clickHis (word) {
				this.keyword = word;
				this.searchSubmit();
			},
			searchSubmit () {
				if (!this.keyword) return;
				this.saveSearchHistory(this.keyword);
				this.getGoodsList(true);
			},
			gotoDetail (id) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: `/subpack_category/goodsDetail/goodsDetail?id=${id}`
				})
			},
			addCart (item) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				this.addCartGoods(item);
			},
			// 将最近浏览的商品储存在本地
			saveSearchHistory (value) {
				let historySearchWords = uni.getStorageSync('historySearchWords');
				if (Array.isArray(historySearchWords) && historySearchWords.length) {
					let findItem = historySearchWords.find(item => item === value);
					if (findItem) {
						historySearchWords.forEach((item, index) => {
							if (item === value) {
								historySearchWords.splice(index, 1);
								historySearchWords.unshift(item);
							};
						})
					} else {
						historySearchWords.unshift(value);
						if (historySearchWords.length > 10) {
							historySearchWords.pop();
						}
					}
					uni.setStorageSync('historySearchWords', historySearchWords);
				} else {
					uni.setStorageSync('historySearchWords', [value]);
				}
			},
			// 清除历史记录
			clearHistory () {
				uni.removeStorageSync('historySearchWords');
				this.getHistory();
			},
			// 获取历史记录
			getHistory () {
				let list = uni.getStorageSync('historySearchWords');
				if (!list.length) {
					this.historySearchList = [];
				} else {
					this.historySearchList = list;
				}
			},
			// 根据分类id获取商品列表
			getGoodsList (clear) {
				this.loading_show = true;
				let data = {
					page: this.goodsPage.page,
					size: this.goodsPage.size,
					businessId: this.businessId,
					categoryId: '-1',
					goodsName: this.keyword
				};
				searchPlugsGoodsByCategoryId(data).then(res => {
					this.loading_show = false;
					if (res.code != 200) return uni.$showMsg();
					this.goodsPage.totalPage = res.body.pages;
					this.goodsPage.hasNextPage = res.body.hasNextPage;
					let list = res.body.list;
					if (clear) {
						this.goodsList = list;
					} else {
						this.goodsList = this.goodsList.concat(list);
					}
					this.getHistory();
				})
			},
		},
		// 滚动到底部加载更多
		scrolltolower () {
			if (!this.goodsPage.hasNextPage) return
			this.goodsPage.page++;
			this.getGoodsList();
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		
		.slide_box{
			width: 100%;
			padding: 0 20rpx;
			padding-bottom: 20rpx;
			box-sizing: border-box;
			height: 84rpx;
			
			.input_box{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				display: flex;
				justify-content: center; 
				align-items: center;
				background-color: #fff;
				position: relative;
				
				.text{
					font-size: 26rpx;
				}
				
				.input{
					width: 100%;
					height: 100%;
					padding: 0 20rpx;
				}
				.icon{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					display: flex;
				}
			}
		}
		.history{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 30rpx;
			padding: 0 30rpx;
			
			.title{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.history_item_box{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				
				.history_item{
					padding: 4rpx 14rpx;
					background-color: #fff;
					border-radius: 10rpx;
					margin: 10rpx;
					font-size: 26rpx;
				}
			}
		}
		.main_content{
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			
			.goods_item{
				width: 340rpx;
				padding: 20rpx 15rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				background-color: #fff;
				border-radius: 20rpx;
				
				.goods_title{
					width: 100%;
					max-height: 3em;
					white-space: normal;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					line-height: 50rpx;
					margin-top: 20rpx;
				}
				
				image{
					width: 340rpx;
					height: 340rpx;
					border-radius: 10rpx;
				}
				.price{
					margin-top: 20rpx;
					font-size: 34rpx;
					color: #FF0000;
					font-weight: bold;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					span{
						font-size: 30rpx;
					}
					.image{
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}
	}
</style>
